﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "外协发料单管理";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="layui-card">
    <div class="layui-card-header">
        <h2>外协发料单管理</h2>
    </div>
    <div class="layui-card-body">
        <!-- 搜索区域 -->
        <div class="layui-form layui-form-pane" style="margin-bottom: 20px;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">发料单编号</label>
                    <div class="layui-input-inline">
                        <input type="text" id="searchIssueListCode" placeholder="请输入发料单编号" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">外协工单编号</label>
                    <div class="layui-input-inline">
                        <input type="text" id="searchOutsourcedOrders" placeholder="请输入外协工单编号" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">供应商名称</label>
                    <div class="layui-input-inline">
                        <input type="text" id="searchVendorName" placeholder="请输入供应商名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">发料日期</label>
                    <div class="layui-input-inline">
                        <input type="text" id="searchIssueDate" placeholder="请选择发料日期" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" onclick="searchData()">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button class="layui-btn layui-btn-primary" onclick="resetSearch()">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </div>
        </div>

        <!-- 操作按钮区域 -->
        <div style="margin-bottom: 10px;">
            <button class="layui-btn" onclick="openAddDialog()">
                <i class="layui-icon layui-icon-add-1"></i> 新增
            </button>
            <button class="layui-btn layui-btn-warm" onclick="openEditDialog()">
                <i class="layui-icon layui-icon-edit"></i> 修改
            </button>
            <button class="layui-btn layui-btn-danger" onclick="deleteSelected()">
                <i class="layui-icon layui-icon-delete"></i> 删除
            </button>
        </div>

        <!-- 数据表格 -->
        <table class="layui-hide" id="outsourcingTable" lay-filter="outsourcingTable"></table>
    </div>
</div>

@section scripts{
    <script>
        layui.use(['table', 'layer', 'form', 'laydate'], function () {
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var laydate = layui.laydate;

            // 日期选择器
            laydate.render({
                elem: '#searchIssueDate'
            });

            // 数据表格
            var tableIns = table.render({
                elem: '#outsourcingTable',
                url: '/Outsourcing/GetOutsourcingMaterial',
                cellMinWidth: 80,
                page: true,
                limits: [10, 20, 50, 100],
                limit: 10,
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'issueListCode', title: '发料单编号', width: 150, sort: true },
                    { field: 'issueListName', title: '发料单名称', width: 120 },
                    { field: 'outsourcedOrders', title: '生产工单编号', width: 120 },
                    { field: 'vendorName', title: '供应商名称', width: 120 },
                    { field: 'issueDate', title: '发料日期', width: 120, templet: function (d) { return layui.util.toDateString(new Date(d.issueDate), 'yyyy-MM-dd'); } },
                    { field: 'state', title: '单据状态', width: 100, templet: function (d) { return d.state === 1 ? '<span class="layui-badge layui-bg-green">已完成</span>' : '<span class="layui-badge layui-bg-orange">待审核</span>'; } },
                    { title: '操作', width: 150, align: 'center', toolbar: '#barDemo', fixed: 'right' }
                ]],
                done: function (res, curr, count) {
                    // 表格渲染完成回调
                }
            });

            // 监听行工具事件
            table.on('tool(outsourcingTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    openEditDialog(data);
                } else if (obj.event === 'delete') {
                    layer.confirm('确定删除这条记录吗？', function (index) {
                        deleteRecord(data.id);
                        layer.close(index);
                    });
                }
            });

            // 全局函数
            window.searchData = function () {
                tableIns.reload({
                    where: {
                        issueListCode: $('#searchIssueListCode').val(),
                        outsourcedOrders: $('#searchOutsourcedOrders').val(),
                        vendorName: $('#searchVendorName').val(),
                        issueDate: $('#searchIssueDate').val()
                    }
                });
            };

            window.resetSearch = function () {
                $('#searchIssueListCode').val('');
                $('#searchOutsourcedOrders').val('');
                $('#searchVendorName').val('');
                $('#searchIssueDate').val('');
                tableIns.reload({
                    where: {}
                });
            };

            window.openAddDialog = function () {
                layer.open({
                    type: 2,
                    title: '添加外协发料单头',
                    shadeClose: true,
                    shade: 0.3,
                    maxmin: true,
                    area: ['900px', '600px'],
                    content: '/Outsourcing/AddOutsourcingMaterialView',
                    end: function () {
                        tableIns.reload();
                    }
                });
            };

            window.openEditDialog = function (data) {
                var checkStatus = table.checkStatus('outsourcingTable');
                if (!data && checkStatus.data.length === 0) {
                    layer.msg('请选择要修改的记录');
                    return;
                }
                var editData = data || checkStatus.data[0];
                layer.open({
                    type: 2,
                    title: '编辑外协发料单',
                    shadeClose: true,
                    shade: 0.3,
                    maxmin: true,
                    area: ['900px', '600px'],
                    content: '/Outsourcing/EditOutsourcingMaterialView?id=' + editData.id,
                    end: function () {
                        tableIns.reload();
                    }
                });
            };

            window.deleteSelected = function () {
                var checkStatus = table.checkStatus('outsourcingTable');
                if (checkStatus.data.length === 0) {
                    layer.msg('请选择要删除的记录');
                    return;
                }
                layer.confirm('确定删除选中的记录吗？', function (index) {
                    var ids = checkStatus.data.map(function (item) { return item.id; });
                    // 这里需要实现批量删除的后端接口
                    // 暂时循环删除
                    var promises = ids.map(function (id) {
                        return deleteRecord(id);
                    });
                    Promise.all(promises).then(function () {
                        tableIns.reload();
                        layer.msg('删除成功');
                    });
                    layer.close(index);
                });
            };

            function deleteRecord(id) {
                return $.ajax({
                    url: '/Outsourcing/DeleteOutsourcingMaterial',
                    type: 'DELETE',
                    data: { outsourcingMaterialId: id },
                    success: function (result) {
                        if (result > 0) {
                            layer.msg('删除成功');
                            tableIns.reload();
                        } else {
                            layer.msg('删除失败');
                        }
                    },
                    error: function () {
                        layer.msg('删除失败');
                    }
                });
            }
        });
    </script>

    <!-- 行工具条模板 -->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>
}
